<template>
  <div class="line_box" ref="echartDom"></div>
</template>

<script setup lang="ts">
import { inject, ref, shallowRef, onMounted, onUnmounted, defineProps, watchEffect } from "vue";
import { pxToRem } from "@/utils/index";

// 接收参数
const props = defineProps({
  housingSupplyStatsData: {
    type: Object,
    default: () => {},
  },
  dialogData: {
    type: Object,
    default: () => ({
      fontSizeTimes: 1
    })
  },
});

// 数据定义
const echartDom = ref<null | HTMLDivElement>(null);
const myChart = shallowRef<null | any>(null);
const echarts = inject<any>("echarts");
const data = ref();

data.value = {
  counties: props.housingSupplyStatsData.nameList,
  timeline: props.housingSupplyStatsData.dateList,
  series: props.housingSupplyStatsData.result,
};
const maxValues = {
  firstItemMax: 0,
  secondItemMax: 0,
  thirdItemMax: 0,
  fourthItemMax: 0,
};
var itemStyle = {
  opacity: 0.8,
};
var sizeFunction = function (x: number) {
  x = Math.max(0, Math.min(x, maxValues.thirdItemMax));
  // 将限制后的值映射到合适的圆的大小范围（例如100到900之间）
  var y = Math.sqrt(x / maxValues.thirdItemMax) + 0.1;
  return y * 80 + 0.1; // 返回100到900之间的圆的大小值
};
// Schema:
var schema = [
  { index: 0, text: "均价", unit: "" },
  { index: 1, text: "平均去化周期", unit: "" },
  { index: 2, text: "库存", unit: "套" },
  { index: 3, text: "销量", unit: "套" },
  { index: 5, text: "销量同比上年", unit: "%" },
];
// echarts初始化渲染
const getEchart = () => {
  if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value);
    const option: { baseOption: any; options: any[] } = {
      baseOption: {
        timeline: {
          axisType: "category",
          orient: "vertical",
          autoPlay: true,
          inverse: true,
          playInterval: 3000,
          left: null,
          right: 0,
          top: pxToRem(20),
          bottom: pxToRem(20),
          width: pxToRem(50),
          height: null,
          symbol: "none",
          label: {
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
          },
          progress: {
            label: {
              fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
              padding: [0, pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 0 : 50), 0, 0]
            },
          },
          checkpointStyle: {
            symbolSize: pxToRem(10 * props?.dialogData?.fontSizeTimes), // 设置圆钮大小为10像素
            borderWidth: pxToRem(2 * props?.dialogData?.fontSizeTimes),
            label: {
              textStyle: {
                fontSize: pxToRem(14 * props?.dialogData?.fontSizeTimes), // 设置文字大小为12像素
              },
            },
          },
          controlStyle: {
            itemSize: pxToRem(20 * props?.dialogData?.fontSizeTimes),
            showNextBtn: false,
            showPrevBtn: false,
          },
          data: [] as any[],
        },
        tooltip: {
          axisPointer: {
            type: "line",
            lineStyle: {
              color: "rgba(40,252,255,0.6)",
              shadowBlur: pxToRem(10 * props?.dialogData?.fontSizeTimes),
              shadowColor: "rgba(0, 0, 0, 0.9)",
            },
          },
          textStyle: {
            color: "#fff",
            fontSize: pxToRem(18 * props?.dialogData?.fontSizeTimes),
          },
          backgroundColor: "rgba(8, 64, 132, 0.9)",
          formatter: function (obj: { value: any }) {
            var value = obj.value;
            return (
              schema[0].text +
              "：" +
              value[1] +
              "<br>" +
              schema[1].text +
              "：" +
              value[3] +
              "<br>" +
              schema[2].text +
              "：" +
              value[0] +
              schema[2].unit +
              "<br>" +
              schema[3].text +
              "：" +
              value[2] +
              schema[3].unit +
              "<br>" +
              schema[4].text +
              "：" +
              value[6] +
              schema[4].unit
            );
          },
        },
        grid: {
          left: "0",
          right: pxToRem(70 * props?.dialogData?.fontSizeTimes),
          bottom: "4%",
          top: "25%",
          containLabel: true,
        },
        xAxis: {
          type: "log",
          name: "库存",
          nameTextStyle: {
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
          },
          boundaryGap: "20%",
          max: maxValues.firstItemMax,
          min: 0.01,
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "#FFFFFF",
              fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
            },
          },
        },
        yAxis: {
          type: "value",
          min: 0.1,
          max: maxValues.secondItemMax,
          nameTextStyle: {
            color: "#959699",
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
          },
          nameGap: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 15 : 25),
          axisLabel: {
            formatter: "{value}",
            color: "#959699",
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
          },
          name: "单价(万元)",
          splitLine: {
            show: true,
            lineStyle: {
              color: "#31679C",
              type: "dashed",
            },
          },
          axisTick: {
            show: false, // 设置为false即可隐藏Y轴刻度线
          },
          axisLine: {
            show: false, // 设置为false即可隐藏Y轴的线
          },
        },
        visualMap: {
          top: pxToRem(5 * props?.dialogData?.fontSizeTimes),
          orient: "horizontal", // 设置为水平展示
          min: 0,
          max: maxValues.fourthItemMax,
          itemWidth: pxToRem(13 * props?.dialogData?.fontSizeTimes),
          itemHeight: pxToRem(111 * props?.dialogData?.fontSizeTimes), // 调整高度值
          inRange: {
            color: ["#2586EE", "#E55151"],
          },
          textStyle: {
            color: "transparent",
          },
          dimension: 3, // 与数组中第四项数据关联
        },
        title: {
          text: "新房去化周期",
          left: pxToRem(120 * props?.dialogData?.fontSizeTimes),
          top: pxToRem(7 * props?.dialogData?.fontSizeTimes),
          textStyle: {
            color: "#9E9E9E",
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
          },
        },
        series: [
          {
            type: "scatter",
            data: data.value.series[0],
            symbolSize: function (val: any[]) {
              return sizeFunction(val[0]);
            },
            itemStyle: itemStyle,
          },
        ],
        animationDurationUpdate: 3000,
        animationEasingUpdate: "quinticInOut",
      },
      options: [],
    };
    for (let n = 0; n < data.value.timeline.length; n++) {
      option.baseOption.timeline.data.push(data.value.timeline[n]);
      option.options.push({
        series: {
          name: data.value.timeline[n].toString(),
          type: "scatter",
          itemStyle: itemStyle,
          data: data.value.series[n],
          symbolSize: (val: number[]) => sizeFunction(val[2]),
          label: {
            show: true,
            position: "inside",
            formatter: function (params: any) {
              return params.data[4]; // 根据数据点的第五个元素显示开发商名称
            },
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes), // 设置文字大小为12
            color: "#fff", // 设置文字颜色为白色
          },
        },
      });
    }
    myChart.value.setOption(option);
  }
};

const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  props.housingSupplyStatsData;
  data.value = {
    counties: props.housingSupplyStatsData.nameList,
    timeline: props.housingSupplyStatsData.dateList,
    series: props.housingSupplyStatsData.result,
  };
  maxValues.firstItemMax = 0;
  maxValues.secondItemMax = 0;
  maxValues.thirdItemMax = 0;
  maxValues.fourthItemMax = 0;
  // 取数组第一项最大值  第二项最大值  第三项最大值   第四项最大值
  data.value.series.forEach((series: any[]) => {
    series.forEach((item) => {
      maxValues.firstItemMax = Math.max(maxValues.firstItemMax, item[0]);
      maxValues.secondItemMax = Math.max(maxValues.secondItemMax, item[1]);
      maxValues.thirdItemMax = Math.max(maxValues.thirdItemMax, item[2]);
      maxValues.fourthItemMax = Math.max(maxValues.fourthItemMax, item[3]);
    });
  });
  getEchart();
};

watchEffect(() => {
  updateChart();
});

onMounted(() => {
  getEchart();
  window.addEventListener("resize", updateChart);
});

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
});
</script>
<style scoped lang="less">
.h220 {
  height: 220px;
}
.dialog-h220 {
  width: 1120px;
  height: 500px;
}
</style>
